<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟手机端播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            height: 300px;
        }

        video {
            width: 100%;
            height: 300px;
            background-color: #000;
        }

        .progress {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50%;
            height: 5px;
            background-color: #fa0;
        }

        .btn {
            position: absolute;
            left: 10px;
            bottom: 15px;
            width: 20px;
        }

        .time {
            position: absolute;
            left: 50px;
            bottom: 15px;
            color: #fff;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <video src="/imgs/1.mp4">若您能看见这段文字说明您的浏览器不支持该视频格式</video>
        <!-- 进度条 -->
        <div class="progress"></div>
        <img src="/imgs/playCircle.png" alt="" class="btn">
        <p class="time">
            <span class="current-time">00:00</span> /
            <span class="total-time">03:00</span>
        </p>
    </div>

    <script>
        let btn = document.querySelector('.btn');  //播放按钮
        let video = document.querySelector('video'); //获取视频
        let progress = document.querySelector(".progress"); //获取进度条
        let current = document.querySelector(".current-time");//获取显示当前时间的盒子
        let total = document.querySelector(".total-time");//获取装总时长的盒子
        let flag = true;  //用于判断播放或者暂停
        let timerID;
        let timerID1;



        // 播放按钮的点击事件
        btn.addEventListener('click', function () {
            progressBar()
            nowTime()

            if (flag) {
                // 播放视频
                video.play();
                this.src = '/imgs/pauseCircle.png';
                flag = false;
            } else {
                clearInterval(timerID)
                clearInterval(timerID1)
                // 暂停播放
                video.pause()
                this.src = '/imgs/playCircle.png';
                flag = true;
            }
        })

        // 定义函数让进度条随着播放时间变化
        function progressBar() {
            timerID = setInterval(function () {
                // 页面加载是就将视频的总时长放如页面
                let m = zero(Math.floor(video.duration / 60))
                let s = zero(Math.floor(video.duration % 60))
                total.innerHTML = `${m}:${s}`;
                // 计算当前时间与总时长的百分比
                let t = Math.floor(video.currentTime / video.duration * 100)
                progress.style.width = t + '%';
            }, 300)
        }

        // 补零函数
        function zero(n) {
            return n > 9 ? n : '0' + n
        }

        // 定义函数让当前播放的时间随着视频播放变化
        function nowTime() {
            timerID1 = setInterval(function () {
                let m = zero(Math.floor(video.currentTime / 60))
                let s = zero(Math.floor(video.currentTime % 60))
                current.innerHTML = `${m}: ${s}`
            }, 1000)

        }
    </script>
</body>

</html>